<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08-列表渲染</title>
</head>
<body>
  <div id="app1">
    <!-- v-for中支持第二个参数,即索引.可以用of代替in作为分隔符,因为of更接近JavaScript的迭代器语法. -->
    <div
      v-for='(item,index) in items'
      v-bind:key='index'
      :class='{Div1 : isDiv1}'
    >
        {{ item.msg }}
      <!-- {{ parentMsg }} - {{index}} - {{ item.msg }} -->
    </div>
  </div>

  <!-- 在对象里面使用v-for -->
  <!-- name代表键名,index代表索引,value代表值 -->
  <div id="app2">
    <div
      v-for=' (value,name,index) in object'
    >
    {{index}} - {{  name }} :{{ value }}
    </div>
  </div>
</body>
<script src="./vue1111.js"></script>
<script>
  var App1 = new Vue({
    el:"#app1",
    data:{
      isDiv1:true,
      parentMsg:'你好',
      items:[
        {msg:'宋起宗'},
        {msg:'张依笑'},
      ]
    }
  });

  var App2 = new Vue({
    el:'#app2',
    data:{
      object:{
        title:'How to do lists in Vue',
        author:'Qizong Song',
        publishedAt:'2021-7-25'
      }
    }
  })
</script>
</html>